<template>
  <el-dialog title="打开图形文件" :visible.sync="dialogVisible" width="800px">
    <el-form>
      <el-form-item label-width="80px;" label="文件名称">
        <el-select v-model="selectValue" clearable filterable placeholder="请输入文件名称" @change='handleSelectChange'>
          <el-option v-for="item in fileOptions" :key="item.value" 
          :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="showFileDatas" height="500" 
      stripe border style="width: 100%"
      @row-dblclick='handleTableDblClick'>
      <el-table-column prop="name" label="名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="type" label="类型" width="180" align="center">
      </el-table-column>      
      <el-table-column prop="aliasName" label="别名" width="180" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" :disabled="scope.row.disabled" @click="handleOpen(scope.row)">打开</el-button>
          <el-button size="mini" type="danger" :disabled="scope.row.disabled" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
var _ = require('lodash')
import { deleteGraphFile, getGraphFileInfos } from '@/api/draw.js'
import UIUtil from '@/utils/graph-utils/uiUtil.js'

export default {
  name: 'OpenGraphFileDialog',
  data() {
    return {
      dialogVisible: false,

      fileDatas: [],
      showFileDatas: [],
      fileOptions: [],
      selectValue: ''
    }
  },
  methods: {
    showDialog() {
      const self = this
      self.dialogVisible = true
      const openedGraphFiles = self.$store.state.graphModule.graphFiles
      getGraphFileInfos().then(response => {
        self.fileDatas = response.data
        for (const fileData of self.fileDatas) {
          const index = openedGraphFiles.findIndex(value => {
            return value.title === fileData.name
          })
          fileData.disabled = index !== -1
        }
        self.updateShowDatas()
      })
    },

    handleTableDblClick(row) {
      if (!row || row.disabled) {
        return
      }
      this.handleOpen(row)
    },

    handleOpen(fileData) {
      const self = this
      self.$store.commit('addGraphTab', fileData)
      self.dialogVisible = false
    },

    handleDelete(fileData) {
      const self = this
      self.$confirm('确定要删除该图形文件吗?', '删除确认', {}).then(response => {
        deleteGraphFile(fileData).then(response => {
          if (response.data) {
            _.remove(self.fileDatas, function(value) {
              return value.name === fileData.name
            })
            self.updateShowDatas()
            UIUtil.successMessage('图形文件删除成功')
          } else {
            UIUtil.successMessage('图形文件删除失败')
          }
        })
      }).catch(() => {})
    },

    handleSelectChange(value) {
      this.updateShowDatas()
    },

    // 更新页面中显示的数据
    updateShowDatas() {
      const self = this
      self.fileOptions = []
      for (const fileData of this.fileDatas) {
        self.fileOptions.push({
          label: fileData.name,
          value: fileData.name
        })
      }

      self.showFileDatas = []
      for (const fileData of self.fileDatas) {
        if (!self.selectValue || fileData.name === self.selectValue) {
          self.showFileDatas.push(fileData)
        }
      }
    }
  }
}
</script>